<template>
  <el-dialog
    title="审批流程"
    v-dialogDrag
    :visible.sync="openRecords"
    :close-on-click-modal="false"
    width="800px"
    append-to-body
    :show-close="false"
    ><el-divider>审批步骤</el-divider>
    <el-timeline>
      <el-card>
        <el-timeline-item
          v-for="(item, index) in stepList"
          :key="index"
          :timestamp="`审批人：${item.approverName}`"
          placement="top"
        >
          <div class="flex-wrap">
            <div>{{ item.signatureStatus == 1 ? "校对" : "审核" }}</div>
          </div>
        </el-timeline-item>
      </el-card>
    </el-timeline>

    <el-divider>审批流程</el-divider>
    <el-timeline v-if="ttaskApprovalRecords.length">
      <el-card>
        <el-timeline-item
          v-for="(item, index) in ttaskApprovalRecords"
          :key="index"
          color="#0bbd87"
          placement="top"
          :timestamp="`${index == 0 ? '提交人' : '审批人'} ：${
            item.approverName
          }`"
        >
          <div class="flex-wrap">
            <span
              :class="item.historyApproverFlag == '1' ? 'historyApprover' : ''"
              >{{ item.historyApproverFlag == "1" ? "历史审批" : "" }}</span
            >
          </div>
          <div class="flex-wrap">
            <div>审批时间：</div>
            <div>{{ item.approverTime }}</div>
          </div>

          <div class="flex-wrap">
            <div>审批状态：</div>
            <div>
              {{
                item.approverFlag == 0
                  ? "未提交"
                  : item.approverFlag == 1
                  ? "待校验"
                  : item.approverFlag == 2
                  ? "待核验"
                  : item.approverFlag == 3
                  ? "已通过"
                  : "未通过"
              }}
            </div>
          </div>
          <div class="flex-wrap" v-if="item.approverReason">
            <div>审批意见：</div>
            <div>{{ item.approverReason }}</div>
          </div>
        </el-timeline-item>
      </el-card>
    </el-timeline>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="cancel">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getTaskInfo } from "@/api/fileManage/entering";
import { listTaskWorkflowStep } from "@/api/system/taskWorkflowStep";
export default {
  props: ["openRecords", "rowId"],
  data() {
    return {
      stepList: [],
      ttaskApprovalRecords: [],
    };
  },
  watch: {
    openRecords: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          getTaskInfo(this.rowId).then((res) => {
            console.log(res.data.ttaskApprovalRecords);
            this.ttaskApprovalRecords = res.data.ttaskApprovalRecords;
          });
        }
      },
    },
  },
  created() {
    listTaskWorkflowStep({
      workflowType: 1,
    }).then((res) => {
      this.stepList = res.rows;
    });
  },
  methods: {
    cancel() {
      this.$emit("closeRecords", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.historyApprover {
  border: 1px solid #eee;
  padding: 2px;
  margin-left: 20px;
  color: #ccc;
}
.flex-wrap {
  margin-top: 10px;
  display: flex;
  align-items: center;
  > div:first-child {
    width: 80px;
  }
}
</style>
